$.get('http://127.0.0.1:5000/line').then(res => {
    const myChart = echarts.init(document.getElementById('line'))
    const option = {
        color: ["#ec6a52", "#f3b7ad"],
        title: {
            text: '各月营业收入折线图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            left: '4%',
            right: '19%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            name: '营业收入(万元)',
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        xAxis: {
            name: '月份',
            type: 'category',
            data: res.label,
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        series: [
            {
                name: res.value[0].name,
                data: res.value[0].value,
                type: 'line',
                label: {
                    show: true,
                    position: 'top',
                    color: '#000000'
                }
            },
            {
                name: res.value[1].name,
                data: res.value[1].value,
                type: 'line',
                label: {
                    show: true,
                    position: 'bottom',
                    color: '#000000'
                }
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/bar').then(res => {
    const myChart = echarts.init(document.getElementById('bar'))
    const option = {
        color: ["#f8b042"],
        title: {
            text: '2023年各月接待人数排行',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            left: '4%',
            right: '19%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            name: '接待人数(万人次)',
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        yAxis: {
            name: '月份',
            type: 'category',
            data: res.label.reverse(),
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        series: [
            {
                data: res.value.reverse(),
                type: 'bar',
                label: {
                    show: true
                }
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/pie/revenue').then(res => {
    const myChart = echarts.init(document.getElementById('revenue'))
    const option = {
        color: ["#c34a5c", "#6B59CD", "#29425c", "#008081"],
        title: {
            text: '营业收入占比图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '评级',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    color: '#ffffff'
                }
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/pie/person').then(res => {
    const myChart = echarts.init(document.getElementById('person'))
    const option = {
        color: ["#c34a5c", "#6B59CD", "#29425c", "#008081"],
        title: {
            text: '接待人数占比图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '评级',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    color: '#ffffff'
                }
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/radar').then(res => {
    const myChart = echarts.init(document.getElementById('radar'))
    const option = {
        title: {
            text: '各月免票人数雷达图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            left: 'center',
            bottom:0
        },
        radar: {
            indicator: res.label.map(value => ({
                name: value,
                max: res.max,
            })),
            center: ['50%', '50%'],
            radius: 100,
            axisName: {
                show: true,
                color: '#ffffff'
            }
        },
        series: {
            type: 'radar',
            areaStyle: {},
            data: res.value.map(value => ({
                name: value.name,
                value: value.value
            })),
        }
    }
    console.log(option)
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/gauge').then(res => {
    const myChart = echarts.init(document.getElementById('gauge'))
    const option = {
        title: {
            text: '2023年较上年的同比增长率',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        color:["#9297c8", "#ee7036"],
        series: [
            {
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 1,
                        borderColor: '#464646'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 40
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: res.value.map((value, index) => ({
                    value: value,
                    name: res.label[index],
                    title: {
                        offsetCenter: ['0%', `${index ? 40 : -40}%`]
                    },
                    detail: {
                        valueAnimation: true,
                        offsetCenter: ['0%', `${index ? 20 : -20}%`]
                    }
                })),
                title: {
                    fontSize: 14
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: 14,
                    color: 'inherit',
                    borderColor: 'inherit',
                    borderRadius: 20,
                    borderWidth: 1,
                    formatter: '{value}%'
                }
            }
        ]
    }
    console.log(option)
    myChart.setOption(option)
})